<template>
    <div>
        <top wrapheight="0" titles="选择场次座位" back="1" more="0">
            <template v-slot:df="scope">
                <div>
                    <!-- 图例 -->
                    <div style="margin:.34rem">
                        <div class="label">
                            <span class="labelitem" style="backgroundColor:coral"></span>
                            <span class="lb">S区</span>
                        </div>
                        <div class="label">
                            <span class="labelitem" style="backgroundColor:#ff50a8"></span>
                            <span class="lb">Y区</span>
                        </div>
                        <div class="label">
                            <span class="labelitem" style="backgroundColor:#ad1db1"></span>
                            <span class="lb">N区</span>
                        </div>
                        <div class="label">
                            <span class="labelitem" style="backgroundColor:#37f499"></span>
                            <span class="lb">已选</span>
                        </div>
                        <div class="label">
                            <span class="labelitem" style="backgroundColor:#ff0000"></span>
                            <span class="lb">不可用</span>
                        </div>
                        <div style="float: right;"><van-button @click="ifzoom = !ifzoom">{{ ifzoom ? '缩小' : '放大'
                        }}</van-button></div>
                    </div>
                    <!-- 座位 -->
                    <div style="position: relative;" :style="{ visibility: sitlist.length ? '' : 'hidden' }">
                        <div class="leftsign">
                            <div v-for="(v, i) in 20" :style="{ width: ifzoom ? '.35rem' : '.34rem' }">
                                <div class="leftsignin"
                                    :style="{ width: ifzoom ? '.35rem' : '.24rem', height: ifzoom ? '.35rem' : '.24rem' }">
                                    {{ i + 1 }}</div>
                            </div>
                        </div>
                        <div style="margin:.26rem .26rem .26rem .4rem;max-height: 10rem; overflow: auto;">
                            <div v-for="(v, i) in 20" style="white-space: nowrap;">
                                <div v-for="(val, ind) in 25" class="items">
                                    <!--  -->
                                    <div class="itemsin"
                                        :style="{ width: ifzoom ? '.35rem' : '.24rem', height: ifzoom ? '.35rem' : '.24rem' }">
                                        <div v-for="vals in sitlist">
                                            <div v-if="vals.x == (ind + 1) && vals.y == (i + 1)" @click="toselect(vals)">
                                                <template v-if="vals.baned">
                                                    <div class="itemsin"
                                                        :style="{ width: ifzoom ? '.35rem' : '.24rem', height: ifzoom ? '.35rem' : '.24rem' }"
                                                        style="margin:0;backgroundColor:#ff0000;"></div>
                                                </template>
                                                <template v-else-if="!vals.baned && vals.select">
                                                    <div class="itemsin"
                                                        :style="{ width: ifzoom ? '.35rem' : '.24rem', height: ifzoom ? '.35rem' : '.24rem' }"
                                                        style="margin:0;backgroundColor:#37f499;">
                                                        <img src="../assets/check.png" style="width:100%;height:100%" alt=""
                                                            v-if="vals.userselect">
                                                    </div>
                                                </template>
                                                <template v-else>
                                                    <div v-if="i < 5" class="itemsin"
                                                        :style="{ width: ifzoom ? '.35rem' : '.24rem', height: ifzoom ? '.35rem' : '.24rem' }"
                                                        style="margin:0;backgroundColor:coral;">
                                                    </div>
                                                    <div v-else-if="i >= 5 && i < 10" class="itemsin"
                                                        :style="{ width: ifzoom ? '.35rem' : '.24rem', height: ifzoom ? '.35rem' : '.24rem' }"
                                                        style="margin:0;backgroundColor:#ff50a8;">
                                                    </div>
                                                    <div v-else-if="i >= 10" class="itemsin"
                                                        :style="{ width: ifzoom ? '.35rem' : '.24rem', height: ifzoom ? '.35rem' : '.24rem' }"
                                                        style="margin:0;backgroundColor:#ad1db1;">
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="clear: both;"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 日期 -->
                    <div class="smalltitle">
                        <span class="smalltitle-left"></span> 日期选择
                    </div>
                    <div style="width: 100%; overflow: auto hidden;white-space: nowrap;">
                        <template v-for="v in dates">
                            <div class="pad" style="width: auto;" :style="{ borderColor: v.sel ? 'blue' : '' }"
                                @click="dateselect">
                                {{ v.date }}
                            </div>
                        </template>
                    </div>
                    <!-- 场次 -->
                    <div class="smalltitle">
                        <span class="smalltitle-left"></span> 当天场次
                    </div>
                    <div style="width: 100%; overflow: auto hidden;white-space: nowrap;">
                        <template v-for="v in times">
                            <div class="pad" :style="{ borderColor: v.sel ? 'blue' : '' }">
                                <div style="float: right;"><van-button @click="sitlistreselect">选择</van-button></div>
                                <div class="times">
                                    {{ v.times }}<br>
                                    <span class="price">{{ v.price }}</span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <!-- 已选座位 -->
                    <div class="smalltitle">
                        <span class="smalltitle-left"></span> 已选座位
                    </div>
                    <div style="width: 100%; overflow: auto hidden;white-space: nowrap;">
                        <div class="pad" style="width:3rem" v-for="v in sitselect">
                            <div style="float: right;"><van-button @click="toselect(v)">删除</van-button></div>
                            <div class="times">
                                {{ v.desc }}
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </top>
    </div>
</template>

<script lang="ts" setup>
import sitlists from '../assets/js/sitlist.js'
import { ref, computed } from 'vue';
const ifzoom = ref(0)
const dates = ref([{ date: '2020-10-10', sel: 1 }, { date: '2020-10-11', sel: 0 }])
const times = ref([{ times: '10:00-12:00', price: '￥31.00', sel: 1 }, { times: '15:00-17:00', price: '￥31.00', sel: 0 }, { times: '20:00-22:00', price: '￥31.00', sel: 0 },])
const sitlist = ref([...sitlists()])
const sitselect = ref([])
// ** /
const cleardatesselect = () => {
    ifzoom.value = 0
    sitlist.value = []
    sitselect.value = []
}
const dateselect = () => {
    times.value = []
    cleardatesselect()
    setTimeout(() => {
        times.value = [{ times: '10:00-12:00', price: '￥31.00', sel: 1 }, { times: '15:00-17:00', price: '￥31.00', sel: 0 }, { times: '20:00-22:00', price: '￥31.00', sel: 0 }]
        sitlistreselect()
    }, 500)
}
const sitlistreselect = () => {
    cleardatesselect()
    setTimeout(() => {
        sitlist.value = [...sitlists()]
    }, 500)
}
const toselect = (vals) => {
    for (var i = 0; i < sitlist.value.length; i++) {
        if (sitlist.value[i].x == vals.x && sitlist.value[i].y == vals.y && !(sitlist.value[i].select && !sitlist.value[i].userselect)) {
            sitlist.value[i].select = !sitlist.value[i].select
            sitlist.value[i].userselect = !sitlist.value[i].userselect
            var inds = -1
            for (var k = 0; k < sitselect.value.length; k++) {
                if (sitlist.value[i].x == sitselect.value[k].x && sitlist.value[i].y == sitselect.value[k].y) {
                    inds = k
                }
            }
            if (inds == -1) {
                sitselect.value.push({ x: sitlist.value[i].x, y: sitlist.value[i].y, desc: sitlist.value[i].desc })
            } else {
                sitselect.value.splice(inds, 1)
            }
            break;
        }
    }
    console.log(sitselect.value)
}
</script>

<style scoped>
.label {
    display: inline-block;
    margin-right: 20px;
}

.labelitem {
    display: inline-block;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 5px;
}

.lb {
    font-size: 26px;
}

/*  */
.leftsign {
    position: absolute;
    top: 0;
    left: -0px;
    background-color: rgba(0, 0, 0, .4);
    color: white;
    border-radius: 5px;
}

.leftsignin {
    display: inline-block;
    margin-bottom: 10px;
    text-align: center;
}

.items {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.itemsin {
    margin: 0 5px 10px;
    margin-bottom: 10px;
    width: 18px;
    height: 18px;
    background-color: #e0e0e0;
    color: white;
    text-align: center;
    border-radius: 5px;
}

.smalltitle {
    padding: 20px;
    /* background-color: #fff3e2; */
    background-color: #eee;
    color: #e45454;
    font-weight: 800;
}

.smalltitle-left {
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 20px;
    background-color: #e45454;
}

.pad {
    display: inline-block;
    margin: 10px;
    padding: 20px;
    width: 400px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.times {
    font-size: 30px;
}

.price {
    font-size: 24px;
    color: #999;
}
</style>